<template>
  <transition name='fade'>
    <ul class="menu-ui"
        :style="{right,top}"
        v-if="show" @contextmenu="rightMenuClick($event)">
      <li v-for="(item, index) in list" @mouseover="pageData.showIndex=index" @mouseleave="pageData.showIndex=-1" :key="index">
        <button :disabled="item.disabled" :class="item['divide'] ? 'divide':''"
                @click="emitClickEvent($event, item)" @contextmenu="emitClickEvent($event, item)">
          <i :class="item.headIcon" v-if="item.headIcon"></i>
          <span>{{ item.label}}</span>
          <i :class="item.tailIcon" class="tail-icon"></i>
        </button>
        <!--存在子元素进行递归-->
        <right-menu v-if="showChildren(item)" @clickOperate="emitClick" @clickOperateMore="emitClickItem"
                             :list="item.children" :startX="isOverflowX?'-95%':'95%'" :startY="'0'"
                             :show="showList(index)"></right-menu>
      </li>
    </ul>
  </transition>
</template>

<script>
import {computed, onMounted, reactive, toRefs} from "vue";

export default {
  name: "RightMenu",
  props: ['startX', 'startY', 'list', 'show'],
  emits: ['clickOperate', 'clickOperateMore'],
  setup(props, context) {
    let pageData = reactive({
          showIndex: -1,
          innerWidth: '',
          innerHeight: '',
        }),
        {startX, startY, list, show} = toRefs(props),
        isOverflowX = computed(() => {
          return startX.value > pageData.innerWidth - 300
        }),
        right=computed(()=>{
          return startX.value > pageData.innerWidth - 150 ? pageData.innerWidth - 150 + 'px' : startX.value - 240 + 'px';
        }),
        top=computed(()=>{
          return startY.value - 130 + 'px';
        }),
        showChildren = (item) => {
          return !(!item.children || !item.children.length);
        },
        showList = (index) => {
          return pageData.showIndex === index;
        },
        emitClick = (index) => {
          context.emit('clickOperate', index)
        },
        emitClickItem = (item) => {
          context.emit('clickOperateMore', item)
        },
        emitClickEvent = (event, item) => {
          if (!showChildren(item)) {
            emitClick(item.clickIndex)
            emitClickItem(item)
          } else {
            event.cancelBubble = true;
            event.stopPropagation();
            event.preventDefault();
          }
        },
        rightMenuClick = (event) => {
          event.preventDefault();
        }
    onMounted(() => {
      pageData.innerWidth = document.documentElement.clientWidth;
      pageData.innerHeight = document.documentElement.clientHeight;
      window.addEventListener('resize', function () {
        pageData.innerWidth = document.documentElement.clientWidth;
        pageData.innerHeight = document.documentElement.clientHeight;
      })
    })

    return {
      pageData,
      startX, startY, list, show, isOverflowX,
      rightMenuClick,
      emitClickEvent,
      showChildren,
      emitClick,
      emitClickItem,
      showList,
      right,
      top
    }
  }
}
</script>

<style scoped lang="less">
.menu-ui {
  position: absolute;
  background: white;
  width: 115px;
  display: list-item;
  box-shadow: 0 0 1px 0 #6a8dfb;
  list-style: none;
  padding: 13px 0;
  z-index: 90000;
  margin: 0;
}

li {
  position: relative;
}

button {
  width: 100%;
  background: #ffffff;
  border: none;
  text-decoration: none;
  position: relative;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  height: 26px;
  line-height: 26px;
  color: #222;

  &:hover {
    background-color: #6a8dfb;
    color: #ffffff;
  }
}

button[disabled] {
  color: #c0c4cc;
  cursor: not-allowed;

  i {
    color: #c0c4cc;
  }
}

.divide {
  border-bottom: 1px solid #e6e6e6;
}

li:hover {
  background-color: #6a8dfb;
}

button > span {
  padding-left: 20px;
  font-size: 13px;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}

i {
  font-size: 13px !important;
}

.head-icon {
  position: absolute;
  left: 10px;
  line-height: 26px;
  color: #bfcbfa;
}

.tail-icon {
  position: relative;
  float: right;
  line-height: 26px;
  color: #bfcbfa;
}
.shanchu{
  display: inline-block;
  height: 16px;
  width: 16px;
  background: url("") no-repeat;
}
.xiugai{
  display: inline-block;
  height: 16px;
  width: 16px;
  background: url("") no-repeat;
}
</style>
